<template>
    <div class="about">
        <div id="chart2" style="width:100%;height:400px;"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import 'echarts/map/js/china' //引用中国地图
    import jsonp from 'jsonp'
    let option = {
        title:{
            text:'vue实现疫情地图',
            textStyle:{
                color:'#9c0505'
            },
            x:'center'//居中
        },

        //提示框
        tooltip:{
            trigger:'item', //类型
            //{a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无
            formatter:'地区:{b}<br/>确诊:{c}'
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        series: [{ //数据
            type: 'map',//图表类型
            map:'china',
            data: [
                {name:'北京',value:'200'},
                {name:'湖北',value: '9000'},
                {name:'湖南',value:'300'},
                {name:'河南',value:'675'}
            ],
            label:{
                show:true, // 图形文标
                color:'red',
                fontSize:10
            },
            zoom:1.3, //当前视角缩放比例
            itemStyle:{
                borderColor:'blue',
            },
            emphasis:{//高亮状态下的多边形和标签样式。(鼠标移入)
                label:{// 图形文标
                    color:'#fff',
                    fontSize:10
                },
                itemStyle:{//地图区域的多边形 图形样式
                    areaColor:'rgb(245,182,35)'
                }
            },
        }],
        //视觉地图
        visualMap: {
           type: 'piecewise',
            pieces: [
                {min: 10000}, // 不指定 max，表示 max 为无限大（Infinity）。
                {min: 1000, max: 9999},
                {min: 100, max: 999},
                {min: 10, max: 99},
                {min: 1, max: 9},
                {value:0}
            ],

            inRange: {
                color: ['#fff', '#ffaa85', '#a92439']
            }
        },
    };
    export default {
        data(){
            return{
                myChart:''
            }
        },
        mounted(){
            //初始化echarts实例
            this.myChart = echarts.init(document.getElementById('chart2'));
            //使用刚指定的配置项和数据显示图表
            // myChart.setOption(option);
            this.getData()
        },
        methods:{
        //jsonp 跨域 服务器与客服端跨域通信，主要针对get请求
            getData(){
                //https://gwpre.sina.cn/interface/fymap2020_data.json?1582899769233&&callback=__dataAPIData
                //https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427
                jsonp('https://gwpre.sina.cn/interface/fymap2020_data.json?1582899769233&&callback=__dataAPIData',(err,data)=>{
                    var list = data.data.list.map(item=>{return{name:item.name,value:item.value}})
                    option.series[0].data=list
                    //使用刚指定的配置项和数据显示图表
                   this.myChart.setOption(option);

                })
            }
        }
    }
</script>

<style scoped>

</style>